<!--
 * @Description: 
 * @Author: WanZhimin
 * @Date: 2021-07-15 09:29:16
 * @LastEditors: Zourongsheng
 * @LastEditTime: 2021-07-17 16:07:38
-->
<template>
  <div>
    <div id="difiniteCasemap"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
require('echarts/extension/bmap/bmap');
export default {
  data() {
    return {};
  },
  computed: {},
  methods: {
    drawh() {
      let myChart = echarts.init(document.querySelector("#difiniteCasemap"));
      var option;
      var data = [
        {
          name: "山东省济宁市",
          value: 26,
        },
        {
          name: "河北省石家庄市",
          value: 89.8,
        },
        {
          name: "吉林省通化市",
          value: 31.3,
        },
        {
          name: "吉林省长春市",
          value: 15,
        },
        {
          name: "黑龙江绥化市",
          value: 53.6,
        },
        {
          name: "黑龙江哈尔滨市",
          value: 41,
        },
        {
          name: "辽宁省",
          value: 43.1,
        },
        {
          name: "内蒙古",
          value: 39,
        },
        {
          name: "新疆乌鲁木齐",
          value: 84.5,
        },
        {
          name: "甘肃省",
          value: 19.5,
        },
        {
          name: "宁夏",
          value: 7.6,
        },
        {
          name: "山西",
          value: 25,
        },
        {
          name: "陕西",
          value: 63,
        },
        {
          name: "河南省信阳市",
          value: 27.4,
        },
        {
          name: "河南省郑州市",
          value: 15.7,
        },
        {
          name: "安徽",
          value: 101,
        },
        {
          name: "江苏",
          value: 75,
        },
        {
          name: "浙江省温州市",
          value: 50.4,
        },
        {
          name: "浙江省杭州市",
          value: 18.1,
        },
        {
          name: "浙江省宁波市",
          value: 15.7,
        },
        {
          name: "浙江省台州市",
          value: 14.7,
        },
        {
          name: "福建省",
          value: 70,
        },
        {
          name: "广东省东莞市",
          value: 10.2,
        },
        {
          name: "广东省广州市",
          value: 52.3,
        },
        {
          name: "广东省深圳市",
          value: 43.1,
        },
        {
          name: "广东省佛山市",
          value: 10.1,
        },
        {
          name: "江西省南昌市",
          value: 23.1,
        },
        {
          name: "江西省新余市",
          value: 12.9,
        },
        {
          name: "江西省上饶市",
          value: 12.3,
        },
        {
          name: "江西省九江市",
          value: 11.6,
        },
        {
          name: "江西省宜春市",
          value: 10.6,
        },
        {
          name: "海南",
          value: 19,
        },
        {
          name: "广西",
          value: 28,
        },
        {
          name: "贵州",
          value: 14.7,
        },
        {
          name: "湖南省长沙市",
          value: 24.2,
        },
        {
          name: "湖南省岳阳市",
          value: 15.6,
        },
        {
          name: "湖北省孝感市",
          value: 351.8,
        },
        {
          name: "湖北省黄冈市",
          value: 290.7,
        },
        {
          name: "湖北省荆州市",
          value: 158,
        },
        {
          name: "湖北省鄂州市",
          value: 139.4,
        },
        {
          name: "湖北省随州市",
          value: 130.7,
        },
        {
          name: "湖北省襄阳市",
          value: 117.5,
        },
        {
          name: "湖北省黄石市",
          value: 101.5,
        },
        {
          name: "湖北省宜昌市",
          value: 93.1,
        },
        {
          name: "湖北省十堰市",
          value: 67.2,
        },
        {
          name: "湖北省仙桃市",
          value: 57.5,
        },
        {
          name: "湖北省天门市",
          value: 49.6,
        },
        {
          name: "湖北省恩施市",
          value: 25.2,
        },
        {
          name: "四川",
          value: 112,
        },
        {
          name: "云南",
          value: 33.3,
        },
        {
          name: "西藏",
          value: 1,
        },
        {
          name: "青海",
          value: 2,
        },
        {
          name: "天津",
          value: 40.8,
        },
        {
          name: "上海",
          value: 37.1,
        },
        {
          name: "重庆",
          value: 60,
        },
        {
          name: "北京市丰台区",
          value: 27.3,
        },
        {
          name: "北京市大兴区",
          value: 13.4,
        },
        {
          name: "北京市海淀区",
          value: 8.2,
        },
        {
          name: "北京市朝阳区",
          value: 8,
        },
        {
          name: "台湾",
          value: 153,
        },
        {
          name: "香港",
          value: 119,
        },
        {
          name: "澳门",
          value: 5,
        },
      ];

      var geoCoordMap = {
        山东省济宁市: [117.000923, 36.675807],
        河北省石家庄市: [115.48333, 38.03333],
        吉林省通化市: [126, 41],
        吉林省长春市: [125.5, 44],
        黑龙江绥化市: [126.99293,46.637393],
        黑龙江哈尔滨市: [126.642464,45.756967],
        辽宁: [123.38333, 41.8],
        内蒙古: [111.670801, 41.818311],
        新疆乌鲁木齐: [87.68333, 43.76667],
        甘肃: [103.73333, 36.03333],
        宁夏: [106.26667, 37.46667],
        山西: [112.53333, 37.86667],
        陕西: [108.95, 34.26667],
        河南省信阳市: [114.075031,32.123274],
        河南省郑州市: [113.665412,34.757975],
        安徽: [117.283042, 31.86119],
        江苏: [119.78333, 32.05],
        浙江省温州市: [120.672111,28.000575],
        浙江省杭州市: [120.153576,30.287459],
        浙江省宁波市: [121.549792,29.868388],
        浙江省台州市: [121.428599,28.661378],
        福建: [118.3, 26.08333],
        广东省东莞市: [113.760234,23.048884],
        广东省广州市: [113.280637,23.125178],
        广东省深圳市: [114.085947,22.547],
        广东省佛山市: [113.122717,23.028762],
        江西省南昌市: [115.892151,28.676493],
        江西省新余市: [114.930835,27.810834],
        江西省上饶市: [117.971185,28.44442],
        江西省九江市: [115.992811,29.712034],
        江西省宜春市: [114.391136,27.8043],
        海南: [110.35, 20.01667],
        广西: [108.320004, 22.82402],
        贵州: [106.71667, 26.56667],
        湖南省长沙市: [112.982279,28.19409],
        湖南省岳阳市: [113.132855,29.37029],
        湖北省荆州市: [112.23813,30.326857],
        湖北省孝感市: [113.926655,30.926423],
        湖北省黄冈市: [114.879365,30.447711],
        湖北省鄂州市: [114.890593,30.396536],
        湖北省随州市: [113.37377,31.717497],
        湖北省襄阳市: [112.144146,32.042426],
        湖北省黄石市: [115.077048,30.220074,],
        湖北省宜昌市: [111.290843,30.702636],
        湖北省十堰市: [110.785239,32.647017],
        湖北省仙桃市: [113.453974,30.364953],
        湖北省天门市: [113.165862,30.653061],
        湖北省恩施市: [109.48699,30.283114],
        四川: [104.06667, 30.66667],
        云南: [102.73333, 25.05],
        西藏: [91.0, 30.6],
        青海: [96.75, 36.56667],
        天津: [117.2, 39.13333],
        上海: [121.55333, 31.2],
        重庆: [106.45, 29.56667],
        北京市丰台区: [116.28625,39.8585],
        北京市大兴区: [116.34149,39.72668],
        北京市海淀区: [116.29812,39.95931],
        北京市朝阳区: [116.48548,39.9484],
        台湾: [121.3, 25.03],
        香港: [114.1, 22.2],
        澳门: [113.5, 22.2],
      };

      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
            });
          }
        }
        return res;
      };

      function renderItem(params, api) {
        var coords = [
          // [110.35, 20.01667],
          // [127.63333, 47.75],
          // [123.38333, 41.8],
          // [87.68333, 43.76667],
        ];
        var points = [];
        for (var i = 0; i < coords.length; i++) {
          points.push(api.coord(coords[i]));
        }
        var color = api.visual("color");

        return {
          type: "polygon",
          shape: {
            points: echarts.graphic.clipPointsByRect(points, {
              x: params.coordSys.x,
              y: params.coordSys.y,
              width: params.coordSys.width,
              height: params.coordSys.height,
            }),
          },
          style: api.style({
            fill: color,
            stroke: echarts.color.lift(color),
          }),
        };
      }

      option = {
        backgroundColor: "transparent",
        title: {
          text: "全国确诊分布",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
        },
        bmap: {
          center: [114.265526, 30.628269],
          zoom: 6,
          roam: true,
          mapStyle: {
            styleJson: [
              {
                featureType: "water",
                elementType: "all",
                stylers: {
                  color: "#6f74f5",
                },
              },
              {
                featureType: "land",
                elementType: "all",
                stylers: {
                  color: "#f9f9f9",
                },
              },
              {
                featureType: "boundary",
                elementType: "geometry",
                stylers: {
                  color: "#b5a277",
                },
              },
              {
                featureType: "railway",
                elementType: "all",
                stylers: {
                  visibility: "true",
                },
              },
              {
                featureType: "highway",
                elementType: "geometry",
                stylers: {
                  color: "#efb370",
                },
              },
              {
                featureType: "highway",
                elementType: "geometry.fill",
                stylers: {
                  color: "#f2b8280",
                  lightness: 1,
                },
              },
              {
                featureType: "highway",
                elementType: "labels",
                stylers: {
                  visibility: "true",
                },
              },
              {
                featureType: "arterial",
                elementType: "geometry",
                stylers: {
                  color: "#fdea82",
                },
              },
              {
                featureType: "arterial",
                elementType: "geometry.fill",
                stylers: {
                  color: "#fdec89",
                },
              },
              {
                featureType: "poi",
                elementType: "all",
                stylers: {
                  visibility: "true",
                },
              },
              {
                featureType: "green",
                elementType: "all",
                stylers: {
                  color: "#056197",
                  visibility: "off",
                },
              },
              {
                featureType: "subway",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "manmade",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "local",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "arterial",
                elementType: "labels",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "boundary",
                elementType: "geometry.fill",
                stylers: {
                  color: "#029fd4",
                },
              },
              {
                featureType: "building",
                elementType: "all",
                stylers: {
                  color: "#1a5787",
                },
              },
              {
                featureType: "label",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
            ],
          },
        },
        series: [
          {
            name: "确诊人数（/10人）",
            type: "scatter",
            coordinateSystem: "bmap",
            data: convertData(data),
            encode: {
              value: 2,
            },
            symbolSize: function (val) {
              return val[2] / 10;
            },
            label: {
              formatter: "{b}",
              position: "right",
            },
            itemStyle: {
              color: "#ff1110",
            },
            emphasis: {
              label: {
                show: true,
              },
            },
          },
          {
            name: "Top 5",
            type: "effectScatter",
            coordinateSystem: "bmap",
            data: convertData(
              data
                .sort(function (a, b) {
                  return b.value - a.value;
                })
                .slice(0, 6)
            ),
            encode: {
              value: 2,
            },
            symbolSize: function (val) {
              return val[2] / 10;
            },
            showEffectOn: "emphasis",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            label: {
              formatter: "{b}",
              position: "right",
              show: true,
            },
            itemStyle: {
              color: "#ff1111",
              shadowBlur: 10,
              shadowColor: "#333",
            },
            zlevel: 1,
          },
          {
            type: "custom",
            coordinateSystem: "bmap",
            renderItem: renderItem,
            itemStyle: {
              opacity: 0.5,
            },
            animation: false,
            silent: true,
            data: [0],
            z: -10,
          },
        ],
      };
      if (option && typeof option === "object") {
        myChart.setOption(option);
      }
    },
  },
  created() {},
  mounted() {
    this.drawh();
  },
};
</script>
<style scoped>
#difiniteCasemap {
   height: calc((100vh - 50px));
}
</style>